import Vue from 'vue'

// https://www.cnblogs.com/Lu-Lu/p/11168904.html

import {addResizeListener, removeResizeListener} from 'element-ui/src/utils/resize-event'

const doTableResize = (el, binding, vnode) => {
  const {componentInstance: $table} = vnode

  const {value} = binding

  if (!$table.height) {
    throw new Error("el-$table must set the height. Such as height='100px'")
  }
  const bottomOffset = (value && value.bottomOffset) || 50

  if (!$table) return
  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
  $table.layout.setHeight(height)
  // $table.store.updateColumns()
  // $table.doLayout()
}


const doDialogResize = (el, binding, vnode) => {
}


/**
 * 表格高度自适应，使用此功能必须先为表格设置初始值
 */
Vue.directive('table-height-adaptive', {
  bind(el, binding, vnode) {
    el.resizeListener = () => {
      el.$resize = true
      doTableResize(el, binding, vnode)
    }

    // addResizeListener(el, el.resizeListener)
    addResizeListener(window.document.body, el.resizeListener)
  },
  inserted(el, binding, vnode) {
    doTableResize(el, binding, vnode)
  },
  unbind(el) {
    // removeResizeListener(el, el.resizeListener)
    removeResizeListener(window.document.body, el.resizeListener)
  }
})

// 对话框拖动调节宽度
Vue.directive('dialog-drag-width', {
  bind(el, binding, vnode, oldVnode) {
    // 最外层的 dialog wrapper
    const wrapper = binding.value.wrapper.$el
    const defaultWidth = binding.value.defaultWidth
    const dragDom = wrapper.querySelector('.el-dialog') || wrapper

    // 设置split bar的样式
    el.style.position = 'absolute'
    el.style.top = '0px'
    el.style.left = '0px'
    el.style.width = '5px'
    el.style.height = (dragDom.offsetHeight - 2) + 'px'
    el.style.cursor = 'col-resize'
    el.style.opacity = '5'
    el.style.backgroundColor = 'transparent'

    // 给split bar添加图标
    let span = document.createElement('span')
    let li = document.createElement('li')
    li.style.position = 'absolute'
    li.style.top = '50%'
    li.style.left = '50%'
    li.setAttribute('class', 'fas fa-arrows-alt-h fas-lg')

    span.appendChild(li)
    el.appendChild(span)

    // 是否有自定义宽度
    let rawWidth = 0
    if (wrapper.style.width != '') {
      rawWidth = wrapper.style.width
    } else {
      rawWidth = defaultWidth
    }

    wrapper.style.width = '100%'
    let maxWidth = wrapper.offsetWidth
    wrapper.style.width = rawWidth


    // 计算出左边的距离
    let left = maxWidth - wrapper.offsetWidth
    wrapper.style.left = `${left}px`

    window.addEventListener('resize', (e) => {
      el.style.height = (dragDom.offsetHeight - 2) + 'px'

      // 记录原来的宽度 及 屏占比
      let oldWidth = wrapper.offsetWidth
      let oldWidthPercent = oldWidth / maxWidth * 1.0

      wrapper.style.width = '100%'
      maxWidth = wrapper.offsetWidth

      oldWidthPercent = oldWidthPercent > 100 ? 100 : oldWidthPercent

      // 设置left及width
      wrapper.style.left = (maxWidth - (maxWidth * oldWidthPercent)) + 'px'
      wrapper.style.width = `${maxWidth * oldWidthPercent}px`
    })


    el.onmousedown = (e1) => {
      // 当前点击时Left的值
      let offsetLeft = e1.clientX

      document.onmousemove = function (e) {
        e.preventDefault() // 移动时禁用默认事件

        if (offsetLeft == e.clientX) {
          return
        }

        // 移动的距离
        let moveDistance = offsetLeft - e.clientX

        wrapper.style.left = (wrapper.offsetLeft - moveDistance) + 'px'
        wrapper.style.width = (maxWidth - wrapper.offsetLeft) + 'px'

        // 已经拉到最左边了，最大化显示
        if (wrapper.offsetLeft <= 0) {
          wrapper.style.left = '0px'
          wrapper.style.width = maxWidth + 'px'
          return
        }

        // 已经拉到最右边了
        if (wrapper.offsetLeft >= (maxWidth - 50)) {
          wrapper.style.left = (maxWidth - 50) + 'px'
          wrapper.style.width = '50px'
          return
        }

        // 更新左边当前位置
        offsetLeft = e.clientX
      }

      document.onmouseup = function (e2) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

/**
 * 监听鼠标滚动的指令
 */
Vue.directive('scroll', {
  // 当绑定元素插入到 DOM 中
  inserted(el, binding) {
    let callback = binding.value
    el.addEventListener('mousewheel', (e) => {
      if (callback) {
        callback(el, e.deltaY)
      }
    })
  }
})

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted(el) {
    // Focus the element
    el.focus()
  }
})
